<template>
<div animated slideInDown>
  <div class="content"  >
     <header>
        <ul>
           <li><Icon type="ios-color-palette" /></li>
           <li><h3>每日推荐</h3></li>
           <li><Icon type="md-options" /></li>
        </ul>
     </header>
     <article>
               
                  <div class="div2img"  v-for="item in imglist" :key="item.message">
                  <div class="img" ><el-image   :src='item'  @click="show(item) " alt="" lazy>
                        <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
                     </el-image></div>
                 
                  </div>       

     </article>
     <footer>
        <div></div>
     </footer>
  </div>
  
  </div>
</template>
<script>
import Vue from 'vue'
export default {
   data(){
      return {
          name:this.$userMsg,
                num:this.$num,
                img1:"",
                  uri :this.$avatericon,
                  imglist:Vue.prototype.$imgs

      }
   },
   //   beforeMount() {
   //      const loading = this.$loading({
   //        lock: true,
   //        text: 'Loading',
   //        spinner: 'el-icon-loading',
   //        background: 'rgba(0, 0, 0, 0.7)'
   //      });
   //      setTimeout(() => {
   //        loading.close();
   //      }, 1000);
   //    },
   methods:{
         show(e){
                 Vue.prototype.$imgpath = e; 
                 console.log( Vue.prototype.$imgpath )
                // this.$router.push({path: '/show'})
                    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

                              this.$router.push({name:"Show"});
                            // router.push({name:"Show"})


                            }else{
                            // router.push({name:"Showpc"})

                              this.$router.push({name:"Showpc"})

                            }
            }
   }
}
</script>
<style  scoped>
.div2img{
   
  box-sizing: border-box;
}
*{height: auto;}
div{
   margin: 0px;
   padding: 0px;
}
.img{
   overflow: hidden;
   transition: 0.6s;
  height: auto;
    max-width: 100vw; 
  width: 40vw;
   margin-top: 8px;
    border-radius: 10px;
   }
  
article{
  margin: 0 10px;
 column-count: 2;
 column-gap: 0px;

}
header{
   
   width: 100vw;
   height: 60px;
}
header ul{
   list-style: none;
   display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: solid 1px;
  border-bottom-color: #4fc08d;
}
header ul>li{
   margin: 10px;
}
.content{
   /* background-color: #F2F6FC; */
   padding-left: 13px;
 overflow: scroll;
   width: 100vw;
  
}
.content::after{
       margin-top: 48px;
 background-image: url('http://tva2.sinaimg.cn/large/006BkBvFly1gefkkr0nacj310r0m8b29.jpg')   ; 
   content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: -2;
    filter: blur(20px);
}
footer{

   position: fixed;
   bottom: 10px;
   margin: 10px;
}

</style>